:root {
    --main-bg-color: #fff;
    --secondary-bg-color: #f5f5f5;
    --button-text-color: #606266;
    --button-active-bg-color: #ecf5ff;
    --button-active-text-color: #409eff;
    --text-color: #606266;
    --border-color: #dcdfe6;
    --toolbar-border-color: #dcdfe6;
    --placeholder-text-color: #333;
    --placeholder-bg-color: #fff;
    --actived-text-color: #409eff;
    --actived-bg-color: #ecf5ff;
    --ace-bg-color: #ddd;
    --disable-text-color: #c0c4cc;
    --disable-border-color: #ebeef5;
    --dropdown-border-color: #e4e7ed;
}

.home {
    overflow: hidden;

    .attr-list {
        overflow: auto;
        padding: 10px 14px;
        padding-top: 0;
        height: 100%;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .el-collapse-item__content {
        padding-bottom: 0;
    }

    .v-common-attr {
        margin-bottom: 18px;

        .el-form {
            padding: 10px;
            padding-top: 0;
        }
    }

    .el-dialog {
        background: var(--main-bg-color);

        .el-dialog__title {
            color: var(--text-color);
        }
    }
}

.el-tabs {
    height: 100%;
}

.el-dropdown {
    color: var(--text-color);
}

.el-tabs__content {
    height: calc(100% - 55px);
    overflow: auto;
}

.el-tabs__nav-scroll {
    padding-left: 20px;
}

.el-tabs__header {
    margin: 0;
}

.el-tag {
    text-align: right;
}

.el-checkbox__inner {
    background-color: var(--placeholder-bg-color);
}

.dark-mode-switch {
    margin-left: 40px;

    .el-switch__core {
        position: absolute;
    }

    .el-switch__label--left {
        margin-right: 5px;
        opacity: 0;

        .el-icon-moon::before {
            color: #817f7f;
        }
    }

    .el-switch__label--left.is-active {
        opacity: 1;
        position: relative;
        z-index: 99;
        left: 20px;
        transition: all .5s ease-in-out;

        .el-icon-moon::before {
            color: #fff;
        }
    }

    .el-switch__label--right {
        margin-left: 5px;
        opacity: 0;

        .el-icon-sunny::before {
            color: #ddd;
        }
    }

    .el-switch__label--right.is-active {
        opacity: 1;
        position: relative;
        z-index: 99;
        right: 20px;
        transition: all .5s ease-in-out;

        .el-icon-sunny::before {
            background: #00000069;
            box-shadow: #0000008f 0 0 12px 5px;
        }
    }
}

.el-color-picker__panel {
    background-color: var(--main-bg-color);
    border-color: var(--border-color);

    .el-color-dropdown__btn,
    .el-input__inner {
        background: var(--secondary-bg-color);
        border: 1px solid var(--secondary-bg-color);
        color: var(--button-text-color);
    }

    .el-color-dropdown__btn:hover {
        background: var(--button-active-text-color);
        border-color: var(--actived-bg-color);
        color: var(--main-bg-color);
    }
}

.el-select-dropdown {
    border-color: var(--dropdown-border-color);
}

.el-color-dropdown__btn {
    background: var(--secondary-bg-color);
    border: 1px solid var(--border-color);
    color: var(--button-text-color);

    &:active {
        background: var(--button-active-text-color);
        border-color: var(--actived-bg-color);
        color: var(--main-bg-color);
    }

    &:hover {
        background: var(--button-active-text-color);
        border-color: var(--actived-bg-color);
        color: var(--main-bg-color);
    }
}
